<template>
  <div>
    <a class="weui-cell weui-cell_access" href="javascript:;" v-if="!address" @click.prevent="goToAddress">
      <div class="weui-cell__bd">
        <p><i class="icon icon-dizhi"></i>选择收货地址</p>
      </div>
      <div class="weui-cell__ft">
      </div>
    </a>

    <div class="address-box" v-if="address" @click.prevent="goToAddress">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <p>{{address.receiverName}}</p>
        </div>
        <div class="weui-cell__ft">{{address.receiverMobileNo}}</div>
      </div>
      <div class="order-address">{{address.addressProvince+address.addressCity+address.addressCounty+address.address}}</div>
    </div>


    <div class="splitBlock"></div>

    <div class="weui-panel__bd">
      <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
        <div class="weui-media-box__hd" :style="'backgroundImage: url('+(lotDetail.smImageUrl.substr(0,4).toLowerCase() == 'http' ? lotDetail.smImageUrl : resUrl+lotDetail.smImageUrl)+')'" >
          <!--<img class="weui-media-box__thumb" :src="resUrl+lotDetail.smImageUrl" alt="">-->
        </div>
        <div class="weui-media-box__bd">
          <h4 class="pro-title">{{lotDetail.name}}</h4>
          <p class="weui-cell__ft" v-if="!totalMoney">￥{{lotDetail.fixedPrice | toDecimal}}</p>
          <p class="weui-cell__ft" v-if="totalMoney">￥{{lotDetail.currentPrice | toDecimal}}</p>
        </div>
      </a>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <p>邮费</p>
        </div>
        <div class="weui-cell__ft">￥{{lotDetail.postage | toDecimal}}</div>
      </div>
    </div>

    <div class="splitBlock"></div>

    <div class="weui-cells__title">选择支付方式</div>
    <div class="weui-cells weui-cells_checkbox">
      <label class="weui-cell weui-check__label" v-for="(v,k) in ePayChannelList" :key="k" :for="v.val" @click="selectPayChannel(v.val)">
        <div class="weui-cell__bd">
          <p><img src="../../../../static/images/order/weixin.png" alt="">{{v.name}}</p>
        </div>
        <div class="weui-cell__ft">
          <input type="radio" class="weui-check" name="radio1" :id="v.val" :checked="payChannel == v.val">
          <span class="weui-icon-checked"></span>
        </div>
      </label>
    </div>

    <div class="weui-cell place-order-box">
      <div class="weui-cell__bd">
        <p>合计金额：
          <span v-if="!totalMoney">￥{{lotDetail.fixedPrice+lotDetail.postage | toDecimal}}</span>
          <span v-if="totalMoney">￥{{totalMoney | toDecimal}}</span>
        </p>
      </div>
      <div class="weui-cell__ft">
        <button class="weui-btn weui-btn_warn" @click="placeOrder">提交订单</button>
      </div>
    </div>

  </div>
</template>

<script>
  import {ipconfig} from '../../../assets/js/ipconfig';
  import {getStore,removeStore,getStatusMapByKey} from '../../../assets/js/tools';
  import {getDefaultAddress,addOrder} from '../../../assets/js/getData';
  export default {
    name: "writeOrder",
    data(){
      return {
        resUrl:ipconfig.resUrl,//图片、视频、音频等资源访问路径
        lotDetail:{},
        orderId:null,
        address:null,
        totalMoney:null,//拍品总价格

        ePayChannelList:{},//支付方式
        payChannel:'',//当前支付方式

      }
    },
    created(){
      let lotDetail = getStore('lotDetail');
      if(lotDetail){
        this.lotDetail = JSON.parse(lotDetail);
      }
      if(this.$route.query.hasOwnProperty('totalMoney')){
        this.totalMoney = this.$route.query.totalMoney
      }

      this.ePayChannelList = getStatusMapByKey('ePayChannel');//支付方式列表
      delete this.ePayChannelList.cashDeposit;
      this.payChannel = getStatusMapByKey('ePayChannel')['wxPay'].val;//默认当前支付方式


      this.orderId = getStore('orderId');

      let address = getStore('address');
      if(address){
        this.address = JSON.parse(address);
      }else {
        this.getDefaultAddress();
      }

    },
    methods:{
      //获取默认地址
      async getDefaultAddress(){
        let res = await getDefaultAddress();
        if(res.data.reqResult.code>0){
          this.address = res.data.data;
        }else {
          Toast(res.data.reqResult.msg);
        }
      },
      //选择地址
      goToAddress(){
        this.$router.replace({name:'addressList'});
      },
      //提交订单
      placeOrder(){
        if(!this.address){
          Toast('请选择地址');
          return;
        }
        let params = {
          id:this.orderId,
          snapshootId:this.lotDetail.snapshootId,
          productId:this.lotDetail.id,
          receiverName:this.address.receiverName,
          receiverMobileNo:this.address.receiverMobileNo,
          addressProvince:this.address.addressProvince,
          addressCity:this.address.addressCity,
          addressCounty:this.address.addressCounty,
          address:this.address.address,
          totalMoney:this.totalMoney ? this.totalMoney : (this.lotDetail.fixedPrice + this.lotDetail.postage),
          payChannel:this.payChannel
        };
        addOrder(params).then(res => {
          if(res.data.reqResult.code>0){
            removeStore('lotDetail');
            removeStore('address');
            removeStore('orderId');
            this.$router.go(-2);
          }else {
            Toast(res.data.reqResult.msg);
          }
        })
      },
      //选择支付方式
      selectPayChannel(v){
        this.payChannel = v;
      },

    }
  }
</script>

<style scoped>
  .icon-dizhi{
    font-size: 0.75rem;
    margin-right: 0.6rem;
  }
  .weui-media-box{
    padding: 0.45rem 0.65rem;
  }
  .weui-media-box_appmsg .weui-media-box__hd{
    width: 4.6rem;
    height: 4.6rem;
    background-origin: content-box;
    background-position:50% 50%;
    background-size:contain;
    background-repeat:no-repeat;
    background-color: rgba(0,0,0,0.1);
  }
  .weui-media-box_appmsg .weui-media-box__bd{
    display: flex;
    flex-direction: column;
    height: 4.6rem;
    justify-content: space-between;
  }
  .pro-title{
    font-size: 0.7rem;
    color: #1A1A1A;
    font-weight: normal;
  }
  .weui-media-box_appmsg .weui-cell__ft{
    color: #C50000;
  }
  .weui-cells_checkbox .weui-icon-checked:before {
    font-size: 1rem;
    color:  #676767;
  }
  .weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before {
    content: '\EA06';
    color: #C50000;
  }
  .weui-cell__bd img{
    width: 0.75rem;
    vertical-align: sub;
    margin-right: 0.75rem;
  }
  .place-order-box{
    padding: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .place-order-box:before{
    left: 0;
  }
  .place-order-box .weui-btn_warn{
    width: 5.55rem;
    line-height: 2.4rem;
    border-radius: 0;
  }
  .place-order-box .weui-cell__bd p{
    text-align: right;
    padding-right: 0.65rem;
  }
  .place-order-box .weui-cell__bd span{
    color: #C50000;
  }
  .address-box .weui-cell{
    padding: 0.5rem 0.65rem 0.6rem 0.65rem;
  }
  .order-address{
    padding: 0 0.65rem 0.6rem 0.65rem;
    font-size: 0.7rem;
    color: #1A1A1A;
  }
</style>
